@import "base";

.classify-main{

  //*****搜索栏*****
  .search-box{
    position: fixed;
    top:0 ;
    left:0;
    background-color: #fff;
    width: 100%;
    height: 44px;
    padding:7px 15px;
    box-sizing: border-box;
    z-index:10;

    span{
      background-color: #F5F5F7;
      width: 100%;
      height: 29px;
      line-height: 29px;
      border-radius: 22px;
      color: #C5C5CC;
    }
  }
  //*****搜索栏*****

  //*****分类列表*****
  .classify-list-box{
    display: flex;
    background-color: #F7F8FA;
    width: 100%;
    height: auto;
    margin-top: 44px;

    //左侧菜单
    .nav-list{
      position: fixed;
      top: 44px;
      left: 0;
      width: 90px;
      height: auto;
      z-index: 10;

      p{
        width: 100%;
        height: 48px;
        line-height: 48px;
      }

      p.active{
        background-color: #fff;
        color: #7E82F6;
      }

      p.active::before{
        content:' ';
        position: absolute;
        left:0;
        top:50%;
        transform: translateY(-50%);
        width: 3px;
        height:14px;
        background-color: #7E82F6;
      }
    }
    //左侧菜单

    //右侧内容
    .classify-list{
      background-color: #fff;
      width: calc(100% - 90px);
      height:auto;
      padding:0 15px;
      box-sizing: border-box;
      margin-left: 90px;

      .classify-one{
        width: 100%;
        height:auto;

        .head{
          width: 100%;
          height:48px;
          line-height: 48px;

          span.left{
            background: -webkit-linear-gradient(bottom,#B0A7FD,#B989F4);
            width: 4px;
            height:12px;
            border-radius: 2px;
            transform: rotate(30deg);
            margin-right: 8px;
          }

          span.left::before{
            content:' ';
            position: absolute;
            top: 5px;
            left: -7px;
            background: -webkit-linear-gradient(top,#98C9F6,#7E82F6);
            width:3px;
            height:8px;
            border-radius: 40%;
          }

          span.right{
            background: -webkit-linear-gradient(top,#B0A7FD,#B989F4);
            width: 4px;
            height:12px;
            border-radius: 2px;
            transform: rotate(30deg);
            margin-left: 8px;
          }

          span.right::before{
            content:' ';
            position: absolute;
            top: -2;
            right: -7px;
            background: -webkit-linear-gradient(top,#98C9F6,#7E82F6);
            width:3px;
            height:8px;
            border-radius: 40%;
          }
        }

        .product-list{
          width: 100%;
          height:auto;

          .mt12{
            margin-top: 12px;
          }

          .product-box{
            width: 100%;
            height: 80px;

            img{
              width: 80px;
              height: 80px;
              vertical-align: top;
            }

            .msg{
              width: calc(100% - 90px);
              height:100%;
              padding-left:4px;

              p:nth-child(2){
                color: #999AA3;
                margin-top: 2px;
              }

              p:last-child{
                bottom:0;
                left:0;
              }
            }
          }

        }
      }
    }
    //右侧内容
  }
  //*****分类列表*****

}
